import * as React from "react";
import {
  Text,
  StyleSheet,
  View,
  SectionList,
  Alert,
  TouchableOpacity,
  Linking,
  DeviceEventEmitter,
  Image
} from "react-native";
import { ListItem, Avatar, Button } from "react-native-elements";
import Icon from "react-native-vector-icons/FontAwesome";
import { observer, inject } from "mobx-react";
import Toast from "react-native-root-toast";

import { InfoData } from "./Service/MockData";
import { NoticeKeys } from "./Utils/utils";
import UserStore from "./Model/UserStore";

interface Props extends React.Props<any> {
  navigation: any;
  userStore: UserStore;
}

interface State {
  isLoaded: boolean;
}

@inject("userStore")
@observer
export default class Setting extends React.Component<Props, State> {
  static navigationOptions: any = {
    title: "设置",
    headerLeft: (
      <TouchableOpacity
        onPress={() => {
          // Add a Toast on screen.
          Toast.show("暂无消息", {
            duration: Toast.durations.LONG,
            position: Toast.positions.CENTER,
            shadow: false,
            animation: true,
            hideOnPress: true,
            delay: 0
          });
        }}
      >
        <Icon
          style={{ marginLeft: 20 }}
          name="bell-o"
          size={24}
          color="white"
        />
      </TouchableOpacity>
    ),
    headerRight: (
      <TouchableOpacity
        onPress={() => {
          // Add a Toast on screen.
          Linking.openURL(`tel:10086`);
        }}
      >
        <Icon
          style={{ marginRight: 20 }}
          name="phone"
          size={24}
          color="white"
        />
      </TouchableOpacity>
    )
  };

  constructor(props: Props) {
    super(props);
    this.state = {
      isLoaded: false
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <SectionList
          style={styles.sectionListContainer}
          renderItem={({ index, item }) => this._renderItem({ index, item })}
          renderSectionFooter={this._renderFooter}
          sections={InfoData}
          keyExtractor={this._keyExtractor}
          ItemSeparatorComponent={this._itemSeparatorComponent}
          stickySectionHeadersEnabled={false}
          ListHeaderComponent={this._renderHeaderView}
          ListFooterComponent={this._renderFooterView}
        />
      </View>
    );
  }

  componentDidMount() {
    // 避免第一次进来会闪一下的问题
    setTimeout(() => {
      this.setState({
        isLoaded: true
      });
    }, 618);
  }

  componentWillUnmount() {}

  _renderItem = ({ index, item }) => {
    return (
      <ListItem
        key={index}
        leftElement={
          <View style={styles.leftElementStyle}>
            <Icon
              name={item.iconName}
              color="#00aced"
              size={20}
              style={styles.iconStyle}
            />
            <Text style={styles.titleStyle}>{item.title}</Text>
          </View>
        }
        rightIcon={<Icon name={"angle-right"} color="gray" size={25} />}
        badge={{
          value: item.unreadNum > 99 ? "99+" : item.unreadNum,
          textStyle: {
            color: item.unreadNum === 0 ? "transparent" : "#EFEFEF"
          },
          badgeStyle: {
            backgroundColor: item.unreadNum === 0 ? "transparent" : "red"
          }
        }}
        onPress={() => this.props.navigation.navigate("Detail")}
      />
    );
  };

  _renderHeaderView = () => {
    return (
      <View>
        <View style={styles.headerContainer}>
          <View style={{ flex: 2.0 / 3 }}>
            <Text style={styles.nameStyle}>{this.props.userStore.name}</Text>
            <Text style={styles.detailStyle}>
              {this.props.userStore.company}
            </Text>
          </View>
          <View style={styles.avatarContainer}>
            <Avatar
              rounded
              source={{ uri: this.props.userStore.avatarUrl }}
              size={80}
              onPress={() => this.props.navigation.navigate("UserInfoDetail")}
            />
            <Image
              source={require("../src/image/VIP.png")}
              style={{
                width: 32,
                height: 32,
                position: "relative",
                right: 25,
                top: -8
              }}
            />
          </View>
        </View>
        <View style={{ height: 1, backgroundColor: "#EFEFEF" }} />
      </View>
    );
  };

  _renderFooter = () => {
    return <View style={{ height: 20, backgroundColor: "#EFEFEF" }} />;
  };

  _keyExtractor = (item: any, index: any) => {
    return item + index;
  };

  _itemSeparatorComponent = () => {
    return <View style={{ height: 1, backgroundColor: "#EFEFEF" }} />;
  };

  _renderFooterView = () => {
    if (this.state.isLoaded) {
      return (
        <View style={{ backgroundColor: "transparent", height: 60 }}>
          <Button
            title=" 注 销"
            buttonStyle={{
              marginLeft: 40,
              marginRight: 40,
              backgroundColor: "red"
            }}
            icon={<Icon name="sign-out" size={24} color="white" />}
            onPressIn={() => {
              Alert.alert(
                "提示",
                "您确定要退出App吗？",
                [
                  { text: "取消", onPress: () => {} },
                  {
                    text: "确定",
                    onPress: () => {
                      this.props.userStore.isLogin = false;
                      DeviceEventEmitter.emit(
                        NoticeKeys.Notice_Key_Login_State,
                        null
                      );
                    }
                  }
                ],
                { cancelable: false }
              );
            }}
          />
        </View>
      );
    } else {
      return <View />;
    }
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column",
    backgroundColor: "#EFEFEF"
  },
  sectionListContainer: {
    height: "100%",
    width: "100%"
  },
  iconStyle: {
    height: 24,
    width: 24
  },
  titleStyle: {
    fontSize: 16,
    color: "#333",
    marginLeft: 10
  },
  leftElementStyle: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center"
  },
  headerContainer: {
    flexDirection: "row",
    backgroundColor: "white",
    height: 150,
    justifyContent: "center",
    alignItems: "center"
  },
  nameStyle: {
    fontSize: 20,
    fontWeight: "bold",
    color: "#333",
    marginLeft: 20
  },
  detailStyle: {
    fontSize: 16,
    color: "#666",
    marginTop: 16,
    marginLeft: 20
  },
  avatarContainer: {
    flex: 1.0 / 3,
    justifyContent: "center",
    alignItems: "flex-start",
    flexDirection: "row"
  }
});
